$middleFontSize:var(--middleFontSize);//中等文字大小
$bigFontSize:var(--bigFontSize);//大文字大小
$formItemLabelColor: var(--formItemLabelColor); //表单项中的label颜色

//写在组件内的样式取出来，让px转rem
.loginPage {
  margin: 0;
  height: 100%;
  width: 100%;

  .hide {
    display: none !important;
  }

  .loginmain {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .loginContent {
    width: 55em;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: url(../assets/images/bg_old.png) no-repeat center;
    background-size: 100%;
  }

  .obpmBid {
    padding-right: 1.625em;
    width: 100%;
    text-align: right;
    vertical-align: middle;
    position: absolute;
    box-sizing: border-box;
  }

  .obpm-Language {
    font-size: 0.875em;
    padding-right: 11px;
    vertical-align: middle;
  }

  .obpm-logoIpt {
    width: 28.125em;
    height: 18.75em;
    background: url(../assets/images/animate.gif) center no-repeat;
    background-size: 100%;
    margin: 1.25em auto 0px;
    padding-top: 2.625em;
    border-radius: 0.3125em;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0px 0.625em 1.6875em -0.375em #302377;
  }

  .obpm-moon {
    position: absolute;
    width: 2.3125em;
    height: 2.125em;
    background: url(../assets/images/moon.png) no-repeat;
    background-size: 100%;
    right: 0.625em;
    top: 0.75em;
  }

  .loginLogo {
    width: 20.125em;
    height: 4em;
    margin: 0px auto 0px;
  }

  .loginLogo img {
    width: 100%;
    height: 100%;
  }

  .obpm-selectLang {
    color: #666666;
    font-size: 0.75em;
    outline-style: none;
    background: #fff;
  }

  .obpm-copy {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .obpm-userInfo_input {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    width: 314px;
    height: 44px;
    font-size: 0.875em;
    color: #fff;
    background: transparent;
    border: 0;
    outline-style: none;
    display: inline-block;
    padding-left: 2px;
  }

  .obpm-userInfoFist {
    width: 22.5em;
    /* height: 44px; */
    background: rgba(253, 252, 252, 0.2);
    margin: 1.125em auto 0px;
    border-radius: 0.3125em;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .obpm-userPwdFist {
    width: 22.5em;
    height: 2.75em;
    background: rgba(253, 252, 252, 0.2);
    margin: 1.625em auto 0.8125em;
    border-radius: 0.3125em;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .obpm-ueserico {
    width: 2.8125em;
    height: 1.125em;
    padding-left: 0.875em;
    padding-right: 1.125em;
    box-sizing: border-box;
  }

  .obpm-userPwdFist2 {
    height: 2.5em;
    margin: 0.75em auto 0;

    input {
      height: 40px;
    }
  }

  .obpm-userInfoFist2 {
    height: 2.5em;

    input {
      height: 40px;
    }

    margin: 0 auto;
  }

  .obpm-proof2 {
    height: 2.5em;
    margin: 0 auto;

    input {
      height: 40px;
    }
  }

  .obpm-loginIn2 {
    margin: 0.5em auto 0;
  }

  .obpm-password_input {
    width: 310px;
    height: 40px;
    padding-left: 2px;
    font-size: 0.875em;
    color: #fff;
    background: transparent;
    border: 0;
    outline: none;
    display: inline-block;
  }

  .obpm-loginIn {
    width: 22.5em;
    height: 2.75em;
    margin: 1.4375em auto 0px;
    background: rgba(49, 156, 255, 0.6);
    border-radius: 0.3125em;
    text-align: center;
    line-height: 2.75em;
    color: #f6f6fb;
    letter-spacing: 0.375em;
    cursor: pointer;
  }

  .obpm-proof {
    width: 22.5em;
    height: 2.75em;
    margin: 0.75em auto 0px;
    display: flex;
    justify-content: flex-start;
  }

  .obpm-proofCode {
    width: 15.5em;
    height: 2.75em;
    background: rgba(253, 252, 252, 0.2);
    /* margin: 12px auto 0px; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-sizing: border-box;
  }

  .obpm-proofImg {
    img {
      width: 5.875em;
      height: 2.5em;
    }

    margin-left: 17px;
    width: 5.875em;
    height: 2.75em;
  }

  .obpm-code_input {
    width: 12.5em;
    height: 2.575em;
    padding-left: 2px;
    font-size: $middleFontSize;
    color: #fff;
    background: transparent;
    border: 0;
    outline: none;
    display: inline-block;
  }

  .obpm-errorMessage {
    display: flex;
    align-items: center;
    margin-top: 1em;
    padding-left: 2.875em;
    padding-right: 1.125em;
  }

  .obpm-tipWord {
    font-size: 0.75em;
    line-height: 0.875em;
    color: #fff;

    b {
      margin-right: 0.8em;
    }
  }

  .obpm-tipImg {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.6em;
    margin-top: -0.25em;
  }

  .copyrightA {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
  }

  .obpm-tou {
    position: relative;
    margin-right: 0.3rem;
    margin-top: 0.9rem;
    margin-bottom: 2.12rem;

    .obpm-xiajiangtou {
      width: 10px;
      height: 18px;
      background: #fff;
      position: absolute;
      top: 3px;
      right: 4px;
      font-size: 0;

      img {
        width: 10px;
        height: 18px;
      }
    }
  }
}

.login5Page {
  margin: 0;
  height: 100%;
  width: 100%;

  .hide {
    display: none !important;
  }

  .loginmain {
    width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .loginContent {
    height: 100%;
    margin: 0 auto;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .obpmBid {
    padding-right: 1.625em;
    width: 100%;
    text-align: right;
    vertical-align: middle;
    position: absolute;
    box-sizing: border-box;
  }

  .obpm-Language {
    font-size: 0.875em;
    padding-right: 11px;
    vertical-align: middle;
    color: #a295bd;
  }

  .obpm-logoIpt {
    width: 300px;
    height: 19.75em;
    background-color: #3a3a3a;
    background-size: 100%;
    padding-top: 0.625em;
    border-radius: 0.3125em;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0px 0.625em 1.6875em -0.375em #302377;
  }

  .obpm-moon {
    position: absolute;
    width: 2.3125em;
    height: 2.125em;
    background: url(../assets/images/moon.png);
    background-size: 100%;
    right: 0.625em;
    top: 0.75em;
  }

  .loginLogo {
    display: flex;
    position: absolute;
    width: 20.125em;
    height: 4em;
    margin: 0px auto 0px;
    left: 4%;
    top: 4%;

    .login_right {
      padding-left: 10px;

      .logo {
        display: flex;

        .logo_left {
          width: 99px;
          height: 28px;
          font-size: 23px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #7453fc;
          line-height: 30px;
        }

        .logo_cent {
          width: 1px;
          height: 20px;
          top: 9px;
          left: 52%;
          position: absolute;
          background: linear-gradient(0deg, #7453fc 0% #7453fc 100%);
          border-radius: 1px;
        }

        .logo_right {
          width: 86px;
          height: 22px;
          padding: 3px 8px 8px 8px;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #7453fc;
          line-height: 29px;
        }
      }
    }

    .logo_text {
      width: 180px;
      height: 34px;
      font-size: 25px;
      padding-top: 8px;
      margin-bottom: 20px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #7453fc;
      line-height: 30px;
    }
  }

  .loginLogo img {
    width: 58px;
    height: 70px;
  }

  .login_title {
    width: 300px;
    height: 45px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
  }

  .obpm-selectLang {
    color: #666666;
    font-size: 0.75em;
    outline-style: none;
    background: #fff;
  }

  .obpm-copy {
    position: absolute;
    bottom: 0;
    color: #ffffff;
    left: 50%;
    transform: translateX(-50%);

    img {
      width: 21px;
      height: 21px;
    }
  }

  .obpm-selectLang {
    color: #666666;
    font-size: 0.75em;
    outline-style: none;
    background: #fff;
  }

  .obpm-copy {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    margin-bottom: 1rem;

    .obpm-img {
      margin-right: 3px;
    }
  }

  .obpm-userInfo_input {
    border-radius: 5px;
    width: 220px;
    height: 44px;
    font-size: 0.875em;
    color: #000;
    border: 0;
    outline-style: none;
    display: inline-block;
    padding: 6px 12px;
  }

  .obpm-userInfoFist {
    /* height: 44px; */
    margin: 25px 40px 10px 40px;
    border-radius: 0.3125em;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .obpm-userPwdFist {
    height: 2.75em;
    margin: 25px 40px 10px 40px;
    border-radius: 0.3125em;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .obpm-ueserico {
    height: 1.125em;
    padding-left: 0.875em;
    padding-right: 1.125em;
    box-sizing: border-box;
  }

  .obpm-password_input {
    height: 40px;
    width: 220px;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 0.875em;
    color: #000;
    border: 0;
    outline: none;
    display: inline-block;
  }

  .obpm-loginIn {
    height: 2.75em;
    margin: 20px 40px 10px 40px;
    background: linear-gradient(90deg, #625eff 0%, #ff00e4 100%);
    border-radius: 0.3125em;
    text-align: center;
    line-height: 2.75em;
    color: #f6f6fb;
    letter-spacing: 0.375em;
    cursor: pointer;
  }

  .obpm-proof {
    height: 2.75em;
    margin: 0.75em auto 0px;
    display: flex;
    justify-content: flex-start;
  }

  .obpm-proofCode {
    background: #ffffff;
    width: 9em;
    margin: 10px 40px 10px 40px;
    height: 2.75em;
    /* margin: 12px auto 0px; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-sizing: border-box;
  }

  .obpm-proofImg {
    img {
      width: 5em;
      height: 2.5em;
    }

    margin-top: 0.7em;
    margin-left: -24px;
    width: 5em;
    height: 2.75em;
  }

  .obpm-code_input {
    width: 10.5em;
    height: 2.575em;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: $middleFontSize;
    color: #000;
    border: 0;
    outline: none;
    display: inline-block;
  }

  .obpm-errorMessage {
    display: flex;
    align-items: center;
    margin-top: 1em;
    padding-left: 2.875em;
    padding-right: 1.125em;
  }

  .obpm-tipWord {
    font-size: 0.75em;
    line-height: 0.875em;
    color: #000;

    b {
      color: #ffffff;
      margin-right: 0.8em;
    }

    span {
      line-height: 1.4;
      color: #ffffff;
    }
  }

  .obpm-tipImg {
    width: 1.2em !important;
    height: 0.9em !important;
    margin-right: 0.6em;
    margin-top: -0.25em;
  }

  .obpm-top {
    margin-top: 50px;
  }

  .copyrightA {
    color: #f50071;
    text-decoration: none;
    background-color: transparent;
  }

  .obpm-tou {
    position: relative;
    margin-right: 0.3rem;
    margin-top: 0.9rem;
    margin-bottom: 2.12rem;

    .obpm-xiajiangtou {
      width: 10px;
      height: 18px;
      background: #fff;
      position: absolute;
      top: 3px;
      right: 4px;
      font-size: 0;

      img {
        width: 10px;
        height: 18px;
      }
    }
  }
}

.homePage {
  .superadmin-list {
    text-align: center;
    padding-top: 80px;
  }

  .obpm-content-title {
    font-size: 30px;
    padding-bottom: 50px;
    color: #7e7e7e;
  }

  .obpm-nav-item a {
    text-decoration: none;
    font-size: $middleFontSize;
    color: #666666;

    span {
      background-size: cover !important;
    }
  }

  .obpm-nav-item a:hover {
    color: #59a8ff;
  }

  .obpm-enterprise-domain span,
  .obpm-privileged-user span,
  .obpm-system span,
  .obpm-systemMoni span,
  .obpm-debugmode span {
    width: 150px;
    height: 150px;
    // border-radius: 50%;
    display: inline-block;
  }

  .obpm-enterprise-domain span {
    background: url('../assets/images/index_domain.png') no-repeat;
  }

  .obpm-enterprise-domain:hover span {
    background: url('../assets/images/index_domain_c.png') no-repeat;
  }

  .obpm-privileged-user span {
    background: url('../assets/images/index_superuser.png') no-repeat;
  }

  .obpm-privileged-user:hover span {
    background: url('../assets/images/index_superuser_c.png') no-repeat;
  }

  .obpm-system span {
    background: url('../assets/images/index_systemconfiguration.png') no-repeat;
  }

  .obpm-system:hover span {
    background: url('../assets/images/index_systemconfiguration_c.png') no-repeat;
  }

  .obpm-systemMoni span {
    background: url('../assets/images/index_systemmonitor.png') no-repeat;
  }

  .obpm-systemMoni:hover span {
    background: url('../assets/images/index_systemmonitor_c.png') no-repeat;
  }

  .obpm-debugmode span {
    background: url('../assets/images/index_debugmode.png') no-repeat;
  }

  .obpm-debugmode:hover span {
    background: url('../assets/images/index_debugmode_c.png') no-repeat;
  }

  .obpm-footer {
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    color: #666666;
  }
}

.user_detail {
  .width180 {
    width: 180px;
  }

  .el-date-editor {
    width: 250px !important;
  }

  .el-checkbox {
    display: inline-block !important;
    font-size: $middleFontSize;
  }

  .role_card_wrap {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

    .role_card {
      height: fit-content;
      min-width: 232px;
      min-height: 208px;
      // background-color: #f2f2f2;
      // border: 1px solid #d7d7d7;
      border-radius: 6px;
      display: inline-block;
      margin-right: 32px;
      margin-bottom: 10px;
      position: relative;
      box-shadow: 0px 4px 14px 0px rgba(1, 47, 82, 0.1);

      .role_header {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        margin-top: 5px;
        border-bottom: 1px solid #d7d7d7;
        ;
        box-sizing: border-box;
        font-size: $middleFontSize;
        margin-bottom: 8px;

        .header_left {
          display: flex;
          align-items: center;

          .header_name {
            font-weight: 700;
          }
        }

        .el-dropdown-link {
          display: inline-block;
          width: 20px;
          cursor: pointer;
          text-align: center;
        }
      }

      .role_content {
        // height: calc(100% - 40px);
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        padding: 2px 15px;
        box-sizing: border-box;

        .content_item {
          min-height: 56px;
          margin-bottom: 5px;

          .item_header {
            color: #0099ff;
            font-size: $middleFontSize;

            .smallDown {
              cursor: pointer;

              .el-icon-arrow-down {
                transform: scale(0.83);
              }
            }
          }

          .item_wrap {
            margin-top: 5px;

            .tag_wrap {
              max-width: 80px;
              position: relative;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin: 0 5px;

              .role_tag {
                margin: 0 15px 0 2px;
              }

              .el-icon-close {
                position: absolute;
                right: 0;
                top: 2px;
                font-size: $bigFontSize;
                cursor: pointer;
              }
            }
          }
        }

        .add_role_btn {
          height: 32px;
          color: white;
          background: #409EFF;
          border-radius: 4px;
          width: 105px;
          margin: 0 auto 16px;
        }
      }
    }

    .role_btn_wrap {
      display: inline-block;
      // line-height: 90px;
    }

  }

  .dept_text {
    display: inline-block;
    min-height: 34px;
    vertical-align: top;
    margin-left: 23px;
  }

  .dept_wrap {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #dedfdf;
    border-radius: 5px;
    min-width: 144px;
    min-height: 34px;
    position: relative;
    max-width: 70%;

    .dept_tag {
      padding-right: 30px;

      span {
        margin: 6px 4px;
      }
    }

    .iconfont {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
  .labelSlot{
    .el-form-item{
      .el-form-item__label{
        width: 100%;
        .df{
          margin-bottom: 0 !important;
        }
      }
    }
  }
}

.bpm_dialog {
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}

.calendar {
  .el-container {
    .el-aside {
      width: 300px;
    }
  }
}

.cpu {
  &>div {
    width: 600px;
    height: 600px
  }
}

.tdMenu {
  td:first-child {
    width: 100px;
  }
}

.extendFlex {
  .addressInput {
    width: 50%;
    margin-left: 2px;
  }
}

.fileUploadContainer {
  .el-header {
    height: 28px;
  }
}

.userlog {
  .userlog-record {
    color: $formItemLabelColor;
    font-size: $middleFontSize;
  }
}

.jamenlist {
  .jamenButton {
    margin-top: 28px
  }

  .list {
    width: 100%;
    overflow-y: scroll;
    height: 550px;

    table {
      height: 100%;
      border-collapse: collapse;
      cellspacing: 0;
      cellpadding: 0;
      // height: 600px;

      tr:first-child {
        position: sticky;
        top: 0px;
        height: 80px !important;
      }

      .borderBottom {
        border-botton: 1px solid #fff;
      }
    }
  }

  td {
    padding: 0;
    font-size: 12px;
    line-height: 32px;
    min-width: 50px;
  }

}

.rolePermission {
  .scrollBarHeight {
    height: calc(100% - 20px)
  }
}

.user-selectbox {
  .el-tree {
    font-size: $middleFontSize;
  }
}